<template>
  <div class="user-manage-container">
    <!-- 标题 -->
    <div class="title">
      <div class="title-text">用户管理</div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="box">
        <div class="search-bar">
          <span>用户名</span>
          <el-input v-model="searchParams.username" placeholder="请输入用户" clearable
            style="width: 200px;margin-left: 30px;" />
        </div>
        <div class="search-bar">
          <span>姓名</span>
          <el-input v-model="searchParams.nickname" placeholder="请输入姓名" clearable
            style="width: 200px;margin-left: 30px;" />
        </div>
        <div class="search-bar">
          <span>角色</span>
          <el-input v-model="searchParams.role" placeholder="请输入角色" clearable style="width: 200px;margin-left: 30px;" />
        </div>
        <div class="search-buttons">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>

        </div>
      </div>

      <div class="table">
        <div class="header">
          <el-button class="btn" type="primary" @click="Add" :icon="Plus">添加用户</el-button>
          <el-button class="btn" type="danger" @click="Delete" :icon="DeleteIcon">批量删除</el-button>
        </div>

        <el-table :data="pagedTableData" border class="biaoge" :resizable="false">
          <el-table-column type="selection" width="55" align="center" header-align="center" :resizable="false" />
          <el-table-column prop="id" label="序号" width="62" align="center" header-align="center" :resizable="false" />
          <el-table-column prop="username" label="用户名" width="190" :resizable="false" />
          <el-table-column prop="nickname" label="昵称" width="132" :resizable="false" />
          <el-table-column prop="role" label="角色" width="110" :resizable="false" />
          <el-table-column prop="status" label="状态" width="110" :resizable="false">
            <template #default="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="163" :resizable="false">
            <template #default="scope">
              <span class="phone-link">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="190" :resizable="false" />
          <el-table-column prop="createTime" label="创建时间" width="200" :resizable="false" />
          <el-table-column label="操作" width="222" :resizable="false">
            <template #default="scope">
              <el-button type="primary" size="small" @click="Edit(scope.row)" :icon="EditPen">
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="Delete(scope.row.id)" :icon="DeleteIcon"
                style="margin-left: 5px">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          :background="true" layout="sizes, total, prev, pager, next" :total="tableData.length"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination" />

        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px" class="custom-dialog">
          <el-form :model="formData" label-width="80px" style="margin: 20px;">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-input v-model="formData.role" placeholder="请输入角色" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-input v-model="formData.status" placeholder="请输入状态" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="formData.createTime" placeholder="请输入创建时间" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false" class="cancel-btn">取 消</el-button>
              <el-button type="primary" @click="Save" class="confirm-btn">确 定</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, Plus, Delete as DeleteIcon, EditPen } from '@element-plus/icons-vue';

const tableData = ref([
  // {
  //   id: 1,
  //   username: 'user',
  //   nickname: 'YFH',
  //   role: '普通用户',
  //   status: '正常',
  //   phone: '15478451524',
  //   email: '875469582@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 2,
  //   username: 'normal',
  //   nickname: 'WQ',
  //   role: '普通用户',
  //   status: '正常',
  //   phone: '14578952648',
  //   email: '1458@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 3,
  //   username: 'test@163.com',
  //   nickname: 'WEM',
  //   role: '普通用户',
  //   status: '正常',
  //   phone: '14523698751',
  //   email: '4677829622@qq.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 4,
  //   username: 'admin',
  //   nickname: 'REF',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '16547852468',
  //   email: '145885562@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 5,
  //   username: '1728654378@qq.com',
  //   nickname: 'DFT',
  //   role: '普通用户',
  //   status: '正常',
  //   phone: '16478549657',
  //   email: '9755256@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 6,
  //   username: 'user2',
  //   nickname: 'YAD',
  //   role: '普通用户',
  //   status: '正常',
  //   phone: '14578451258',
  //   email: '58975652@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 7,
  //   username: 'user3',
  //   nickname: 'GDF',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '15987459654',
  //   email: '79526534@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 8,
  //   username: 'user4',
  //   nickname: 'IYN',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '15346987458',
  //   email: '15879@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 9,
  //   username: 'user5',
  //   nickname: 'IGB',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '12369584578',
  //   email: '3556585@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 10,
  //   username: 'user4',
  //   nickname: 'IYN',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '15346987458',
  //   email: '15879@163.com',
  //   createTime: '2025-06-21 10:30'
  // },
  // {
  //   id: 11,
  //   username: 'user5',
  //   nickname: 'IGB',
  //   role: '管理员',
  //   status: '正常',
  //   phone: '12369584578',
  //   email: '3556585@163.com',
  //   createTime: '2025-06-21 10:30'
  // },

]);

const currentPage = ref(1);
const pageSize = ref(5);
const searchParams = reactive({
  username: '',
  nickname: '',
  role: ''
});

interface TableDataItem {
  id: number;
  username: string;
  nickname: string;
  role: string;
  status: string;
  phone: string;
  email: string;
  createTime: string;
}


const pagedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
}

const dialogVisible = ref(false);
const dialogTitle = ref('');

const formData = reactive({
  id: null as number | null,
  username: '',
  nickname: '',
  role: '',
  status: '',
  phone: '',
  email: '',
  createTime: ''
});

// 增
const Add = () => {
  dialogTitle.value = '添加用户';
  Object.assign(formData, {
    id: null,
    username: '',
    nickname: '',
    role: '',
    status: '',
    phone: '',
    email: '',
    createTime: ''
  });
  dialogVisible.value = true;
};
// 改
const Edit = (row: TableDataItem) => {
  dialogTitle.value = '编辑员工';
  Object.assign(formData, { ...row });
  dialogVisible.value = true;
};
// 删
const Delete = (id: number) => {
  const index = tableData.value.findIndex(item => item.id === id);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    ElMessage.success('删除成功');
  }
};
const Save = () => {
  if (!formData.username || !formData.nickname || !formData.role) {
    ElMessage.warning('请填写内容');
    return;
  };
  if (formData.id) {
    const index = tableData.value.findIndex(item => item.id === formData.id);
    if (index !== -1) {
      tableData.value[index] = {
        id: formData.id,
        username: formData.username,
        nickname: formData.nickname,
        role: formData.role,
        status: formData.status || '正常',
        phone: formData.phone,
        email: formData.email,
        createTime: formData.createTime || new Date().toLocaleDateString()
      };
      ElMessage.success('编辑成功');
    }
  } else {
    const newId = Math.max(...tableData.value.map(item => item.id), 0) + 1;
    tableData.value.push({
      id: newId,
      username: formData.username,
      nickname: formData.nickname,
      role: formData.role,
      status: formData.status || '正常',
      phone: formData.phone,
      email: formData.email,
      createTime: formData.createTime || new Date().toLocaleDateString()
    });
    ElMessage.success('添加成功');
  }
  dialogVisible.value = false;
}

// 查询
const handleSearch = () => {
  ElMessage.success('查询如下');

  console.log('查询参数:', searchParams);
}

// 重置
const handleReset = () => {
  searchParams.username = '';
  searchParams.nickname = '';
  searchParams.role = '';
  ElMessage.success('重置成功');
}

//请求获取数据
import request from '@/utils/http'
const getTableData = async () => {
  const res = await request({
    url: '/emp/emp',
  })
  console.log(res);

}
onMounted(() => getTableData())

</script>
<style scoped>
.user-manage-container {
  width: 1650px;
  height: 963px;
  background-color: #F6F8FC;
  position: relative;
}

.title {
  position: absolute;
  margin: 26px auto 20px 8px;
  width: 87px;
  height: 30px;
  border-left: 5px solid #36A46E;
  color: #1A70AD;
  font-size: 18px;
}

.content {
  width: 1560px;
  height: 887px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}


.box {
  width: 1588px;
  height: 116px;
  margin: 23px auto 55px;
  border-radius: 10px;
  border: #797979 solid 1px;
  box-shadow: 2px 2px 5px #797979;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.table {
  /* padding: 20px; */
  width: 1588px;
  height: 634px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  border: #797979 solid 1px;
  box-shadow: 2px 2px 5px #797979;
  position: relative;
}

.biaoge {
  width: 1420px;
  height: 427px;
  margin: 18px auto 77px 28px;
  position: absolute;
  bottom: 10px;
}

.header {
  margin: 28px;
}

.search-bar {
  margin-bottom: 10px;
}

.search-buttons {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

/* :deep(.el-table__header-wrapper) {
  background-color: #1A70AD;
} */

:deep(.el-table__header-wrapper th) {
  background-color: #1A70AD !important;
  color: white;
  text-align: center;
  border: 1px solid #797979
}

:deep(.el-table) {
  border: 1px solid #797979 !important;
  border-radius: 4px !important;
}

:deep(.el-table__body-wrapper td) {
  text-align: center;
  border: 1px solid #797979
}

.table>:not(caption)>*>* {
  padding: 0;
}

.btn {
  background-color: #1A70AD !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 24px !important;
  height: auto !important;
}

.pagination {
  position: absolute;
  bottom: 24px;
  right: 138px;
}

:deep(.custom-dialog .el-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

:deep(.custom-dialog .el-dialog__header) {
  background-color: #1A70AD;
  border-radius: 8px 8px 0 0;
  padding: 15px 20px;
}

:deep(.custom-dialog .el-dialog__title) {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

:deep(.custom-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

:deep(.custom-dialog .el-dialog__headerbtn:hover .el-dialog__close) {
  color: #dcdfe6;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 10px 20px 20px;
  background-color: #fff;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 0 20px 20px;
  background-color: #fff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.cancel-btn {
  background-color: #f5f7fa !important;
  color: #606266 !important;
  border: 1px solid #dcdfe6 !important;
  padding: 8px 24px !important;
  border-radius: 4px !important;
}

.cancel-btn:hover {
  background-color: #e9ebee !important;
  border-color: #c0c4cc !important;
  color: #606266 !important;
}

.confirm-btn {
  background-color: #1A70AD !important;
  border-color: #1A70AD !important;
  color: white !important;
  padding: 8px 24px !important;
  border-radius: 4px !important;
}

.confirm-btn:hover {
  background-color: #155a8a !important;
  border-color: #155a8a !important;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}
</style>